<template>
  <div class="wraper-box">
    <div class="cartLayout">
      <MHeader>
        <slot>购物车</slot>
      </MHeader>
      <cube-checkbox-group class="courseList" v-model="checkList">
        <div class="courseItem" v-for="courseItem in cartListArry" :key="courseItem._id">
          <cube-checkbox :option="courseItem._id">
            <div class="courseInfo">
              <img :src="courseItem.banner" />
              <div class="course-text">
                <p class="course-title">{{courseItem.name}}</p>
                <span>¥{{courseItem.price}}元</span>
              </div>
            </div>
          </cube-checkbox>
          <cube-button @click="removeCart(courseItem._id)">删除</cube-button>
        </div>
      </cube-checkbox-group>
      <div class="cartButton">
        <cube-checkbox @input="isSelectAll" v-model="selectAll">全选</cube-checkbox>
        <div>合计:{{this.total}}元</div>
        <cube-button @click="emptyCart">去结算</cube-button>
      </div>
    </div>
  </div>
</template>
<script>
import MHeader from "@/components/MHeader";
import { mapState } from "vuex";
import * as types from "@/store/types.js";
export default {
  data() {
    return {
      checkList: [],
      selectAll: false,
      total: 0
    };
  },
  components: {
    MHeader
  },
  methods: {
    emptyCart() {
            this.dialog = this.$createDialog({
        type: "confirm",
        title: "确认订单",
        content: `共计支付${this.total}元`,
        prompt: {
          value: "",
          placeholder: "请输入"
        },
        confirmBtn: { text: "购买" },
        onConfirm: (e, promptValue) => {
            this.$store.commit("course/"+types.EMPTY_CARLIST)
              const toast = this.$createToast({
                type: "text",
                txt: "购买成功"
              });
              toast.show();
        }
      }).show();
    },
    isSelectAll(value) {
      if (value) {
        this.checkList = this.cartListArry.map(x => x._id);
        this.selectAll = true;
      } else {
        this.checkList = [];
        this.selectAll = false;
      }
    },
    removeCart(id) {
      this.$store.commit("course/"+types.REMOVE_CARLIST, id);
    },
    
  },
  computed: {
    ...mapState("course", ["cartList"]),
    cartListArry() {
      return Object.values(this.cartList);
    }
  },
  watch: {
    checkList() {
      this.total = this.checkList.reduce(
        (x, y) => x + this.cartList[y].price,
        0
      );
      if (this.checkList.length == this.cartListArry.length) {
        this.selectAll = true;
      } else {
        this.selectAll = false;
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.cartLayout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.courseList {
  flex: 1;

  .cube-checkbox {
  }

  img {
    height: 46px;
  }
}

.cartButton {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  button {
    width: 40%;
    background-color: red;
  }
}

.cube-checkbox-label {
  width: 100%;
}

.courseInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  flex: 1;

  .course-text {
    width: 100%;
  }
}

.courseItem 
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #ebebeb;
  button
    width 20%

</style>
